<script>
import BackgroundComponents from "./genealogicalBackgroundComponents/backgroundComponents.vue";
import app from "../../../config/app";

export default {
  name: "worshipAncestorsAndSeekRoots",
  data() {
    return {
      IMG_URL: app.IMG_URL,
      title: '德姓始祖',
      zimuList: [
        {
          name: "A"
        },
        {
          name: "B"
        },
        {
          name: "C"
        },
        {
          name: "D"
        },
        {
          name: "E"
        },
        {
          name: "F"
        },
        {
          name: "G"
        },
        {
          name: "H"
        },
        {
          name: "I"
        },
        {
          name: "J"
        },
        {
          name: "K"
        },
        {
          name: "L"
        },
        {
          name: "M"
        },
        {
          name: "N"
        },
        {
          name: "O"
        },
        {
          name: "P"
        },
        {
          name: "Q"
        },
        {
          name: "R"
        },
        {
          name: "S"
        },
        {
          name: "T"
        },
        {
          name: "U"
        },
        {
          name: "V"
        },
        {
          name: "W"
        },
        {
          name: "X"
        },
        {
          name: "Y"
        },
        {
          name: "Z"
        },
        {
          name: "全"
        }
      ],
      peopleList: [
        {
          name: '张三',
          img: `${app.IMG_URL}zhang.png?x-oss-process=image/resize,w_44,h_44`,
          surname: '张'
        },
        {
          name: '李四',
          img: `${app.IMG_URL}li.png?x-oss-process=image/resize,w_44,h_44`,
          surname: '李'
        },
        {
          name: '王五',
          img: `${app.IMG_URL}wang.png?x-oss-process=image/resize,w_44,h_44`,
          surname: '王'
        },
        {
          name: '赵六',
          img: `${app.IMG_URL}zhao.png?x-oss-process=image/resize,w_44,h_44`,
          surname: '赵'
        },
        {
          name: '孙七',
          img: `${app.IMG_URL}sun.png?x-oss-process=image/resize,w_44,h_44`,
          surname: '孙'
        },
        {
          name: '周八',
          img: `${app.IMG_URL}zhou.png?x-oss-process=image/resize,w_44,h_44`,
          surname: '周'
        }
      ]
    }
  },
  components: {BackgroundComponents}
}
</script>

<template>
  <view class="worshipAncestorsAndSeekRoots allColumnCenter">
    <view class="mrZhongWu_search allRowCenter mt-20">
      <image class="mrZhongWu_search_image"
             :src="`${IMG_URL}search.png?x-oss-process=image/resize,w_44,h_44`"></image>
      <text class="mrZhongWu_search_text">搜索姓名</text>
    </view>
    <background-components class="mt-20">
      <template v-slot:content>
        <view class="allColumnCenter">
          <view class="worshipAncestorsAndSeekRoots_banner">

          </view>
          <view class="worshipAncestorsAndSeekRoots_name allRowCenter">
            <text class="worshipAncestorsAndSeekRoots_name_text">黄帝</text>
          </view>
          <view class="worshipAncestorsAndSeekRoots_floatingWindowHead allRowCenter mt-39">
            <view class="worshipAncestorsAndSeekRoots_floatingWindowHead_content allRowCenter" v-if="!!title">
              <text class="worshipAncestorsAndSeekRoots_floatingWindowHead_content_text">{{ title }}</text>
            </view>
          </view>
          <view class="worshipAncestorsAndSeekRoots_abbreviationsList">
            <view class="worshipAncestorsAndSeekRoots_abbreviationsList_list allRowCenter"
                  v-for="(item, index) in zimuList" :key="index">
              <text class="worshipAncestorsAndSeekRoots_abbreviationsList_list_text">{{ item.name }}</text>
            </view>
          </view>
          <view class="worshipAncestorsAndSeekRoots_peopleList">
            <view class="worshipAncestorsAndSeekRoots_peopleList_all" v-for="(item, index) in peopleList" :key="index">
              <view class="worshipAncestorsAndSeekRoots_peopleList_all_info">
                <image class="worshipAncestorsAndSeekRoots_peopleList_all_info_img"
                       :src="item.img"></image>
                <view class="worshipAncestorsAndSeekRoots_peopleList_all_info_bottom allRowCenter">
                  <text class="worshipAncestorsAndSeekRoots_peopleList_all_info_bottom_text">{{ item.name }}</text>
                </view>
              </view>
              <view class="worshipAncestorsAndSeekRoots_peopleList_all_introduced allRowCenter">
                <text class="worshipAncestorsAndSeekRoots_peopleList_all_introduced_text">
                  {{ item.surname }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </background-components>
  </view>
</template>

<style scoped lang="scss">
.worshipAncestorsAndSeekRoots {
  width: 702rpx;
  background: #FFEDC7;

  .mrZhongWu_search {
    width: 661rpx;
    height: 80rpx;
    background: #FAD582;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .mrZhongWu_search_image {
      width: 44rpx;
      height: 44rpx;
    }

    .mrZhongWu_search_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #CC8A00;
    }
  }

  .worshipAncestorsAndSeekRoots_banner {
    width: 554rpx;
    height: 353rpx;
    background: #B9A475;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .worshipAncestorsAndSeekRoots_name {
    width: 554rpx;

    .worshipAncestorsAndSeekRoots_name_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #292929;
    }
  }

  .worshipAncestorsAndSeekRoots_floatingWindowHead {
    width: 554rpx;

    .worshipAncestorsAndSeekRoots_floatingWindowHead_content {
      width: 233rpx;
      height: 85rpx;
      background: url($genealogyBackgroundMap +"fhm_detail_title_bg.png") no-repeat;
      background-size: 233rpx 100%;

      .worshipAncestorsAndSeekRoots_floatingWindowHead_content_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #292929;
      }
    }
  }

  .worshipAncestorsAndSeekRoots_abbreviationsList {
    width: 615rpx;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-row-gap: 15rpx;

    .worshipAncestorsAndSeekRoots_abbreviationsList_list {
      .worshipAncestorsAndSeekRoots_abbreviationsList_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #292929;
      }
    }
  }

  .worshipAncestorsAndSeekRoots_peopleList {
    width: 615rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 15rpx;

    .worshipAncestorsAndSeekRoots_peopleList_all {
      .worshipAncestorsAndSeekRoots_peopleList_all_info {
        width: 146rpx;
        height: 175rpx;
        background: #B9A475;
        overflow: hidden;
        .worshipAncestorsAndSeekRoots_peopleList_all_info_img {
          height: 140rpx;
          width: 146rpx;
          background: #B9A475;
        }

        .worshipAncestorsAndSeekRoots_peopleList_all_info_bottom {
          width: 146rpx;
          height: 35rpx;
          background: #E5E5E5;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          .worshipAncestorsAndSeekRoots_peopleList_all_info_bottom_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #292929;
          }
        }
      }

      .worshipAncestorsAndSeekRoots_peopleList_all_introduced {
        .worshipAncestorsAndSeekRoots_peopleList_all_introduced_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #292929;
        }
      }
    }
  }
}
</style>